<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        input{
            width: 40px;
        }
    </style>
</head>
<body>
    <div class="app">
        <ul >
            <li v-for="(item,index) in arr"  :key="item.id">
                <button @click="item.count--">-</button>
                <span >{{item.count}}</span>
                <button @click="item.count++">+</button>
                <p><input type="checkbox" v-model="item.checked" >{{item.name}}<input type="number" v-model="item.price">元/斤</p>
                <!-- <p>{{item.price}}元/斤</p> -->
                <!-- <p>{{item.count}}</p> -->
            </li>
        </ul>
        <input type="checkbox" v-model="allcheck" @click="change">
        <div >总价{{totle}}</div>
        <hr />
        {{allcheck}}
        {{arr}}
    </div>
    <script>
        const vm=new Vue({
            el:'.app',
            data:{
                // num:0,
                allcheck:false,
                arr:JSON.parse(localStorage.getItem('arr'))|| [
                    { id: 1, name: '苹果', price: 10, count: 1 ,checked:false},
                    { id: 2, name: '香蕉', price: 22, count: 2 ,checked:false},
                    { id: 3, name: '梨', price: 13, count: 3 ,checked:false}
                ],
            },
            watch:{
                arr:{
                     handler(){
                        this.allcheck=this.arr.every(v=>v.checked)
                        localStorage.setItem('arr',JSON.stringify(this.arr))
                    },
                    deep:true,
                    immediate:true,
                }
            },
            methods:{
                change(){
                    this.arr.forEach(e => {
                        e.checked=!this.allcheck
                    });
                }
               
            },
            // 作用：可以根据一个或者多个变量自动生成新变量，函数内部使用的变量更新时 vue 会自动执行函数计算结果，内部变量没有更新时直接从缓存中读取结果
        // 计算属性使用时不需要手动调用函数，vue 会自动执行函数，函数必须有返回值
            computed:{
                totle(){
                    return this.arr.reduce((prev,item)=>{
                        return prev+(item.checked?item.price*item.count:0)
                    },0)
                }
            }
        })
    </script>
</body>
</html>